* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 0.512rem;
  font-family: "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-serif;
  list-style: none;
}
html,
body {
  height: 100%;
  overflow-x: hidden;
}
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
.head {
  height: 1.87733333rem;
  padding: 0 0.64rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F5F5F5;
}
.head a {
  display: block;
  height: 0.93866667rem;
}
.head a img {
  vertical-align: top;
  height: 100%;
}
.container {
  background-color: #B7EBD5;
}
.container .con-wrap {
  margin: 0 0.384rem;
  height: 100%;
  overflow: hidden;
}
.container .con-wrap .activity .intro {
  padding: 0.42666667rem 0;
  display: flex;
  justify-content: space-between;
  color: white;
  height: 1.83466667rem;
}
.container .con-wrap .activity .intro div span {
  vertical-align: top;
  font-size: 0.59733333rem;
}
.container .con-wrap .activity .intro div a {
  display: inline-block;
  border-radius: 10%;
  height: 100%;
  background-color: #92BCAA;
  padding: 0.17066667rem;
}
.container .con-wrap .activity .intro div a span {
  text-align: center;
  font-size: 0.512rem;
}
.container .con-wrap .activity .discount {
  display: flex;
  padding-bottom: 0.42666667rem;
}
.container .con-wrap .activity .discount > div + div {
  margin-left: 0.21333333rem;
}
.container .con-wrap .activity .discount .coupon {
  overflow: hidden;
  background-color: #FFFCD7;
  height: 2.77333333rem;
  flex: 1;
}
.container .con-wrap .activity .discount .coupon > div:first-child {
  position: relative;
  left: 0;
  top: 0;
  display: inline;
  background-color: #FFAE2C;
}
.container .con-wrap .activity .discount .coupon > div:first-child span {
  color: white;
  font-size: 0.064rem;
}
.container .con-wrap .activity .discount .coupon .money {
  display: flex;
  align-items: center;
}
.container .con-wrap .activity .discount .coupon .money span {
  color: #ff0045;
}
.container .con-wrap .activity .discount .coupon .money > span:nth-child(2) {
  font-size: 1.024rem;
}
.container .con-wrap .activity .discount .coupon .money > span:nth-child(3) {
  width: 3.49866667rem;
}
.container .con-wrap .activity .discount .coupon .money > span:nth-child(4) {
  display: block;
  background-color: #ff0045;
  padding: 0.10666667rem;
  border-radius: 0.21333333rem;
  color: #ffffff;
}
.container .con-wrap .activity .discount .coupon .expla {
  background-color: #FFD882;
  height: 0.98133333rem;
  text-align: center;
  padding-top: 0.21333333rem;
}
.container .con-wrap .one {
  background-color: #FFFFFF;
}
.container .con-wrap .one .tit {
  background-color: #FE3316;
  height: 1.70666667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
.container .con-wrap .one .tit > div:first-child span {
  vertical-align: middle;
  font-size: 0.768rem;
  color: #FFFFFF;
  line-height: 1.70666667rem;
}
.container .con-wrap .one .tit > div:first-child img {
  vertical-align: top;
  height: 1.70666667rem;
}
.container .con-wrap .one .tit > div:nth-child(2) {
  color: #FFFFFF;
}
.container .con-wrap .one .tit > div:nth-child(2) span {
  font-size: 0.512rem;
}
.container .con-wrap .one .tit > div:nth-child(2) img {
  color: #ffffff;
  height: 0.42666667rem;
  margin-right: 0.42666667rem;
}
.container .con-wrap .one .goods {
  padding-top: 0.17066667rem;
  display: flex;
  height: 7.46666667rem;
}
.container .con-wrap .one .goods .detail {
  flex: 1;
}
.container .con-wrap .one .goods .detail div {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container .con-wrap .one .goods .detail div img {
  height: 4.56533333rem;
}
.container .con-wrap .one .goods .detail > div:nth-child(2) {
  width: 4.69333333rem;
}
.container .con-wrap .one .goods .detail .price {
  font-weight: bold;
  color: #FF0045;
  padding-top: 0.64rem;
  padding-left: 0.23466667rem;
}
.container .con-wrap .one .goods .detail .price > div:first-child {
  height: 1.06666667rem;
  float: left;
  display: flex;
  align-items: baseline;
  padding-top: 0.21333333rem;
}
.container .con-wrap .one .goods .detail .price > div:first-child span {
  font-size: 0.66133333rem;
}
.container .con-wrap .one .goods .detail .price > div:first-child img {
  height: 0.46933333rem;
}
.container .con-wrap .one .goods .detail .price > div:nth-child(2) {
  float: right;
  border-radius: 50%;
  background-color: #ff0045;
  height: 1.024rem;
  width: 1.024rem;
  padding: 0.21333333rem;
}
.container .con-wrap .one .goods .detail .price > div:nth-child(2) img {
  color: #FFFFFF;
  height: 0.59733333rem;
}
.container .con-wrap .one .more {
  border-top: 0.10666667rem solid #F2F2F2;
  height: 1.92rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .con-wrap .one .more a {
  display: table-cell;
  width: 13.09866667rem;
  height: 1.19466667rem;
  border: solid 0.064rem #FF0045;
  text-align: center;
  line-height: 1.06666667rem;
}
.container .con-wrap .one .more a span {
  font-size: 0.59733333rem;
  color: #FF0045;
  font-weight: bold;
}
.container .con-wrap .nav {
  position: relative;
  height: 1.70666667rem;
  margin: 0.384rem 0 0.256rem;
  background-color: #FFFFFF;
}
.container .con-wrap .nav .nav-list {
  white-space: nowrap;
  float: left;
}
.container .con-wrap .nav .nav-list li {
  display: inline-block;
  padding: 0 0.42666667rem;
}
.container .con-wrap .nav .nav-list li.active {
  background-color: #FF0036;
}
.container .con-wrap .nav .nav-list li a {
  display: block;
  height: 1.70666667rem;
  line-height: 1.70666667rem;
}
.container .con-wrap .nav .nav-list li a span {
  font-size: 0.64rem;
}
.container .con-wrap .nav .mask-btn {
  position: absolute;
  z-index: 199;
  right: 0;
  top: 0;
  height: 1.70666667rem;
  width: 1.792rem;
  background-color: #fff;
  box-shadow: -0.02133333rem 0.02133333rem 0.02133333rem lightgray;
  padding: 0.42666667rem;
}
.container .con-wrap .nav .mask-btn img {
  width: 0.96rem;
  height: 0.85333333rem;
}
.container .con-wrap .nav .mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
}
.container .con-wrap .nav .mask .mask-tit {
  height: 1.70666667rem;
  padding: 0 0.512rem;
  border-bottom: solid 0.02133333rem #EDEDED;
  text-align: center;
  color: #929292;
  line-height: 1.70666667rem;
}
.container .con-wrap .nav .mask .mask-tit span {
  font-size: 0.59733333rem;
  font-weight: bold;
}
.container .con-wrap .nav .mask .mask-list {
  padding: 0.59733333rem 0.93866667rem 0.34133333rem;
}
.container .con-wrap .nav .mask .mask-list li {
  float: left;
  width: 4.43733333rem;
  height: 1.28rem;
  margin-bottom: 0.42666667rem;
  line-height: 1.28rem;
  text-align: center;
}
.container .con-wrap .nav .mask .mask-list li span {
  font-size: 0.64rem;
}
.container .con-wrap .nav .mask .mask-list li.active {
  background-color: #FF0036;
}
.container .con-wrap .nav .mask .mask-list:after {
  display: table;
  content: '';
  clear: both;
}
.container .con-wrap .shop .shop-tit {
  height: 1.32266667rem;
  line-height: 1.32266667rem;
  text-align: center;
}
.container .con-wrap .shop .shop-tit span {
  font-size: 0.768rem;
  font-weight: bold;
  color: white;
}
.container .con-wrap .shop .shop-list {
  display: grid;
  grid-template-rows: repeat(10, 4.096rem);
  grid-template-columns: repeat(2, auto);
  grid-gap: 0.10666667rem;
}
.container .con-wrap .shop .shop-list .shop-detail {
  position: relative;
  display: flex;
  background-color: #fff;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-img {
  float: left;
  margin: 0.34133333rem 0 0.72533333rem 0.256rem;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-img img {
  vertical-align: top;
  width: 2.98666667rem;
  height: 2.98666667rem;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-img .num {
  padding: 0 0.128rem;
  position: absolute;
  top: 2.96533333rem;
  background-color: #FF0045;
  color: #fff;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-intro {
  float: left;
  padding: 0.34133333rem 0.34133333rem 0.34133333rem 0.17066667rem;
  width: 3.84rem;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-intro > div:first-child {
  line-height: 0.81066667rem;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-intro > div:first-child span {
  font-size: 0.55466667rem;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-intro .shop-discount {
  display: inline-block;
  background-color: #FEEEF4;
  border: solid 0.02133333rem #ff0036;
  padding: 0 0.14933333rem;
  color: #ff0036;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-intro .shop-price {
  margin-top: 0.256rem;
  display: flex;
  justify-content: space-between;
  color: #ff0036;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-intro .shop-price .item-price {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-intro .shop-price img {
  height: 0.42666667rem;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-intro .shop-price > div:last-child {
  width: 1.024rem;
  height: 1.024rem;
  background-color: #FF0045;
  border-radius: 50%;
  display: table-cell;
  text-align: center;
}
.container .con-wrap .shop .shop-list .shop-detail .shop-intro .shop-price > div:last-child img {
  padding: 0.21333333rem;
  height: 1.024rem;
  width: 1.024rem;
}
.container .con-wrap .fam .fam-tit {
  height: 1.32266667rem;
  line-height: 1.32266667rem;
  text-align: center;
}
.container .con-wrap .fam .fam-tit span {
  font-size: 0.768rem;
  font-weight: bold;
  color: white;
}
.container .con-wrap .fam .fam-list {
  display: grid;
  grid-template-rows: repeat(6, 8.87466667rem);
  grid-template-columns: repeat(3, auto);
  grid-gap: 0.21333333rem;
}
.container .con-wrap .fam .fam-list .fam-detail {
  padding: 0.21333333rem;
  position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
.container .con-wrap .fam .fam-list .fam-detail > * {
  flex: 1;
}
.container .con-wrap .fam .fam-list .fam-detail .fam-img img {
  width: 4.48rem;
  height: 4.48rem;
}
.container .con-wrap .fam .fam-list .fam-detail .fam-num {
  position: absolute;
  top: 4.07466667rem;
  left: 0;
  text-align: center;
  color: #fff;
  background-color: #ff0036A6;
  width: 3.66933333rem;
  height: 0.68266667rem;
  line-height: 0.68266667rem;
}
.container .con-wrap .fam .fam-list .fam-detail > div:nth-child(3) span {
  font-size: 0.55466667rem;
  margin-top: 0.08533333rem;
  display: block;
  width: 4.30933333rem;
  height: 0.85333333rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container .con-wrap .fam .fam-list .fam-detail .explain {
  width: 4.30933333rem;
  height: 0.768rem;
}
.container .con-wrap .fam .fam-list .fam-detail .explain span {
  color: #999;
}
.container .con-wrap .fam .fam-list .fam-detail .fam-discount span {
  background-color: #FEEEF4;
  border: solid 0.02133333rem #ff0036;
  padding: 0 0.14933333rem;
  color: #ff0036;
}
.container .con-wrap .fam .fam-list .fam-detail .fam-price {
  display: flex;
  justify-content: space-between;
  color: #ff0036;
}
.container .con-wrap .fam .fam-list .fam-detail .fam-price .item-price {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
}
.container .con-wrap .fam .fam-list .fam-detail .fam-price img {
  height: 0.42666667rem;
}
.container .con-wrap .fam .fam-list .fam-detail .fam-price > div:last-child {
  width: 1.024rem;
  height: 1.024rem;
  background-color: #FF0045;
  border-radius: 50%;
  display: table-cell;
  text-align: center;
}
.container .con-wrap .fam .fam-list .fam-detail .fam-price > div:last-child img {
  padding: 0.21333333rem;
  height: 1.024rem;
  width: 1.024rem;
}
